<template>
	<view class="ccontainer cflex_items">
		<view class="inputBlock cflex cflex_row cflex_between cflex_items">
			<view>出厂价</view>
			<input class="inputClass cflex cflex_1" type="text" v-model="form.factory_price" @blur="inputText" data-name="factory_price"
			 placeholder="请输入出厂价" placeholder-class="inputPla" />
		</view>
		<view class="hr"></view>
		<view class="inputBlock cflex cflex_row cflex_between cflex_items">
			<view>税金</view>
			<input class="inputClass cflex cflex_1" type="text" v-model="form.taxes	" @blur="inputText" data-name="taxes	"
			 placeholder="请输入金额" placeholder-class="inputPla" />
		</view>
		<view class="hr"></view>
		<view class="inputBlock cflex cflex_row cflex_between cflex_items">
			<view>票据类型</view>
			<view class="cflex cflex_row cflex_items">
				<view class="cflex cflex_row cflex_items">
					<view style="margin:0 10rpx 0 34rpx">普票</view>
					<image v-if="form.taxes_type==1" @click="taxesTypeChange" data-taxes_type="0" class="releasecheck" src="/static/clq-image/releaseSeled.png"></image>
					<image v-else @click="taxesTypeChange" data-taxes_type="1" class="releasecheck" src="/static/clq-image/releaseSel.png"></image>
				</view>
				<view class="cflex cflex_row cflex_items">
					<view style="margin:0 10rpx 0 34rpx">专票</view>
					<image v-if="form.taxes_type==2" @click="taxesTypeChange" data-taxes_type="0" class="releasecheck" src="/static/clq-image/releaseSeled.png"></image>
					<image v-else @click="taxesTypeChange" data-taxes_type="2" class="releasecheck" src="/static/clq-image/releaseSel.png"></image>
				</view>
			</view>
		</view>
		<view class="hr"></view>
		<view class="inputBlock cflex cflex_row cflex_between cflex_items">
			<view>报价</view>
			<input class="inputClass cflex cflex_1" type="text" v-model="form.quoted_price" @blur="inputText" data-name="quoted_price"
			 placeholder="请输入金额" placeholder-class="inputPla" />
		</view>
		<view class="hr"></view>
		<view class="inputBlock cflex cflex_row cflex_between cflex_items">
			<view>运费</view>
			<input class="inputClass cflex cflex_1" type="text" v-model="form.shipping" @blur="inputText" data-name="shipping"
			 placeholder="请输入金额" placeholder-class="inputPla" />
		</view>

		<picker class="picker1 cflex cflex_row cflex_items" style="height: 70rpx;margin-top: 22rpx;" mode="date" fields="day"
		 :value="form.quotedtime" @change="quotedtimeChange">
			<view style="width: 710rpx;" class="cflex cflex_row cflex_between cflex_items">
				<view>报价有效期</view>
				<view class="cflex cflex_row cflex_items">
					<view class="inputPla" v-if="!form.quotedtime">请选择时间</view>
					<view class="picker1-left2" v-else>{{form.quotedtime}}</view>
					<image class="more-icon" src="/static/clq-image/release-more.png" mode=""></image>
				</view>
			</view>
		</picker>
		<view class="hr"></view>
		<view class="inputBlock cflex cflex_row cflex_between cflex_items">
			<view>起订量</view>
			<input class="inputClass cflex cflex_1" type="text" v-model="form.num" @blur="inputText" data-name="num" placeholder="请输入订单数量"
			 placeholder-class="inputPla" />
		</view>
		<view class="hr"></view>
		<picker class="picker1 cflex cflex_row cflex_items" style="height: 70rpx;" mode="date" fields="day" :value="form.warrantytime"
		 @change="warrantytimeChange">
			<view style="width: 710rpx;" class="cflex cflex_row cflex_between cflex_items">
				<view>质保时间</view>
				<view class="cflex cflex_row cflex_items">
					<view class="inputPla" v-if="!form.warrantytime">请选择时间</view>
					<view class="picker1-left2" v-else>{{form.warrantytime}}</view>
					<image class="more-icon" src="/static/clq-image/release-more.png" mode=""></image>
				</view>
			</view>
		</picker>

		<view class="inputBlock cflex cflex_row cflex_between cflex_items" style="margin-top: 22rpx;">
			<view>是否有品牌要求</view>
			<view class="cflex cflex_row cflex_items">
				<view class="cflex cflex_row cflex_items">
					<view style="margin:0 10rpx 0 34rpx">是</view>
					<image v-if="form.need_brand==1" @click="needBrandChange" data-need_brand="0" class="releasecheck" src="/static/clq-image/releaseSeled.png"></image>
					<image v-else @click="needBrandChange" data-need_brand="1" class="releasecheck" src="/static/clq-image/releaseSel.png"></image>
				</view>
				<view class="cflex cflex_row cflex_items">
					<view style="margin:0 10rpx 0 34rpx">否</view>
					<image v-if="form.need_brand==2" @click="needBrandChange" data-need_brand="0" class="releasecheck" src="/static/clq-image/releaseSeled.png"></image>
					<image v-else @click="needBrandChange" data-need_brand="2" class="releasecheck" src="/static/clq-image/releaseSel.png"></image>
				</view>
			</view>
		</view>
		<view v-if="form.need_brand==1" class="inputBlock cflex cflex_row cflex_between cflex_items">
			<input class="brandInput cflex cflex_1" type="text" v-model="form.brand" @blur="inputText" data-name="brand"
			 placeholder="请输入品牌" placeholder-class="inputPla" />
		</view>
		<view class="hr"></view>
		<view class="inputBlock cflex cflex_row cflex_between cflex_items">
			<view>交货时间</view>
			<input class="inputClass cflex cflex_1" type="text" v-model="form.delivery" @blur="inputText" data-name="delivery"
			 placeholder="请输入时间" placeholder-class="inputPla" />
		</view>
		<view class="hr"></view>
		<view class="inputBlock cflex cflex_row cflex_between cflex_items">
			<view>是否有资质或证书要求</view>
			<view class="cflex cflex_row cflex_items">
				<view class="cflex cflex_row cflex_items">
					<view style="margin:0 10rpx 0 34rpx">是</view>
					<image v-if="form.need_qualific==1" @click="needQualificChange" data-need_qualific="" class="releasecheck" src="/static/clq-image/releaseSeled.png"></image>
					<image v-else @click="needQualificChange" data-need_qualific="1" class="releasecheck" src="/static/clq-image/releaseSel.png"></image>
				</view>
				<view class="cflex cflex_row cflex_items">
					<view style="margin:0 10rpx 0 34rpx">否</view>
					<image v-if="form.need_qualific==2" @click="needQualificChange" data-need_qualific="" class="releasecheck" src="/static/clq-image/releaseSeled.png"></image>
					<image v-else @click="needQualificChange" data-need_qualific="2" class="releasecheck" src="/static/clq-image/releaseSel.png"></image>
				</view>
			</view>
		</view>
		<view v-if="form.need_qualific==1" class="inputBlock cflex cflex_row cflex_between cflex_items" style="padding: 0 20rpx;">
			<input class="brandInput cflex cflex_1" type="text" v-model="form.qualific" @blur="inputText" data-name="qualific"
			 placeholder="请输入资质或证书" placeholder-class="inputPla" />
		</view>
		<view v-if="form.need_qualific==1" class="proImage cflex cflex_row cflex_items cflex_wrap" style="background-color: #fff;">
			<block v-for="(item,index) in qualific_images">
				<view class="imageItem">
					<image class="imageItem-delete" src="/static/clq-image/release-delete.png" @click="imageDelete" :data-index="index"></image>
					<image class="imageItem-main" :src="item" @click="previewImage" :data-index="index" data-uploadType="2"></image>
				</view>
			</block>
			<view class="upLoadImage cflex cflex_row cflex_center cflex_items" @click="upLoadImage">+</view>
		</view>
		<view class="hr"></view>
		<view class="inputBlock cflex cflex_row cflex_between cflex_items">
			<view>运输方式</view>
			<view class="cflex cflex_row cflex_items">
				<view class="cflex cflex_row cflex_items">
					<view style="margin: 0 14rpx 0 32rpx;">快递</view>
					<image v-if="form.shipping_method==1" @click="shippingMethodChange" data-shipping_method="0" class="releasecheck"
					 src="/static/clq-image/releaseSeled.png"></image>
					<image v-else @click="shippingMethodChange" data-shipping_method="1" class="releasecheck" src="/static/clq-image/releaseSel.png"></image>
				</view>
				<view class="cflex cflex_row cflex_items">
					<view style="margin: 0 14rpx 0 32rpx;">整车运输</view>
					<image v-if="form.shipping_method==2" @click="shippingMethodChange" data-shipping_method="0" class="releasecheck"
					 src="/static/clq-image/releaseSeled.png"></image>
					<image v-else @click="shippingMethodChange" data-shipping_method="2" class="releasecheck" src="/static/clq-image/releaseSel.png"></image>
				</view>
				<view class="cflex cflex_row cflex_items">
					<view style="margin: 0 14rpx 0 32rpx;">物流点自提</view>
					<image v-if="form.shipping_method==3" @click="shippingMethodChange" data-shipping_method="0" class="releasecheck"
					 src="/static/clq-image/releaseSeled.png"></image>
					<image v-else @click="shippingMethodChange" data-shipping_method="3" class="releasecheck" src="/static/clq-image/releaseSel.png"></image>
				</view>
			</view>
		</view>


		<view class="inputBlock cflex cflex_row cflex_items" style="margin-top: 19rpx;">
			<view class="settingText">基本参数</view>
			<view class="addSetting cflex cflex_row cflex_center cflex_items" @click="addSetting">添加</view>
		</view>
		<view v-if="settingType == 1" class="hr"></view>
		<view v-if="settingType == 1" class="inputBlock cflex cflex_row cflex_between cflex_items">
			<input class="inputClass cflex cflex_1" style="text-align: left;" type="text" v-model="obj.setting_name" @blur="inputObj"
			 data-type="1" data-name="setting_name" placeholder="请输入商品名称" placeholder-class="inputPla" />
			<input class="inputClass cflex cflex_1" type="text" v-model="obj.setting_value" @blur="inputObj" data-type="1"
			 data-name="setting_value" placeholder="请输入商品名称" placeholder-class="inputPla" />
		</view>
		<block v-for="(item,index) in setting" :key="index">
			<view class="hr"></view>
			<view class="inputBlock cflex cflex_row cflex_between cflex_items">
				<input class="inputClass cflex cflex_1" style="text-align: left;" type="text" v-model="item.setting_name" @blur="inputObj"
				 data-type="2" :data-index="index" data-name="setting_name" placeholder="请输入商品名称" placeholder-class="inputPla" />
				<input class="inputClass cflex cflex_1" type="text" v-model="item.setting_value" @blur="inputObj" data-type="2"
				 :data-index="index" data-name="setting_value" placeholder="请输入商品名称" placeholder-class="inputPla" />
			</view>
		</block>

		<view class="inputBlock cflex cflex_row cflex_between cflex_items" style="margin-top: 22rpx">
			<view>意见反馈</view>
			<view></view>
		</view>
		<view class="textareaBlock cflex cflex_row cflex_center cflex_items">
			<textarea class="inputBlock" style="height: 160rpx;" v-model="form.remarks" @blur="inputText" data-name="remarks"
			 maxlength="-1" placeholder="请先和商家协商一致" placeholder-class="inputPla" />
			</view>
			
		<view class="releaseBtn  cflex cflex_row cflex_center cflex_items" @click="addGood">
			<view v-if="spec_type == 3">提交议价</view>
			<view v-if="spec_type == 4">提交报价</view>
		</view>
	</view>
</template>

<script>
	import {
		ajax
	} from '../../ajax.js';
	const COS = require('../../libs/cos-wx-sdk-v5')
	const config = require('../../libs/config')
	const cos = new COS({
		getAuthorization: function(params, callback) { //获取签名 必填参数
			// 方法二（适用于前端调试）
			let authorization = COS.getAuthorization({
				SecretId: config.SecretId,
				SecretKey: config.SecretKey,
				Method: params.Method,
				Key: params.Key
			});
			callback(authorization);
		}
	});
	export default {
		data() {
			return {
				spec_type: '',
				good_id:'',
				form: {
					taxes_type: 0,
					quotedtime: '',
					warrantytime: '',
					need_brand: 0, //是否有品牌要求:1=是,2=否
					need_qualific: 0, //1=是,2=否
					shipping_method: 0
				},
				images: [],
				qualific_images: [],
				settingType: 0,
				obj: {},
				setting: [{
					setting_name: '尺寸',
					setting_value: ''
				}, {
					setting_name: '材质',
					setting_value: ''
				}, {
					setting_name: '功能',
					setting_value: ''
				}, {
					setting_name: '颜色',
					setting_value: ''
				}]
			};
		},
		onReady:function(){
			let that = this
			if (that.spec_type == 3) {
				uni.setNavigationBarTitle({
					title: "我要议价"
				})
			} else if (that.spec_type == 4) {
				uni.setNavigationBarTitle({
					title: "我要报价"
				})
			}
		},
		onLoad: function(opt) {
			let that = this
			// that.spec_type = opt.type
			// that.id = opt.id
			that.spec_type = 4
			that.id = 48
			console.log('that.id',that.id)
			
			// var date = new Date();
			// that.form.delivery = date.getFullYear() + '-' + (Number(date.getMonth() + 1)<10 ? '0' + Number(date.getMonth() + 1) : Number(date.getMonth() + 1)) + '-' + date.getDate()
		},
		methods: {
			addGood() {
				let that = this
				uni.showLoading({
					title: "加载中"
				})
				if (that.form.need_brand == 0) {
					uni.showToast({
						title: '请选择是否有品牌要求',
						duration: 1500,
						icon: 'none'
					})
				} else if (that.form.need_qualific == 0) {
					uni.showToast({
						title: '请选择资质或证书要求',
						duration: 1500,
						icon: 'none'
					})
				} else if (that.form.shipping_method == 0) {
					uni.showToast({
						title: '请选择运输方式',
						duration: 1500,
						icon: 'none'
					})
				} else {
					ajax({
						url: 'goods/addSpec',
						data: {
							token: uni.getStorageSync('token'),
							spec_type: Number(that.spec_type),
							good_id: Number(that.id),
							factory_price:parseFloat(that.form.factory_price),
							quoted_price:parseFloat(that.form.quoted_price),
							taxes:parseFloat(that.form.taxes),
							taxes_type: Number(that.form.taxes_type),
							shipping:parseFloat(that.form.shipping),
							shipping_method:Number(that.form.shipping_method),
							quotedtime:that.form.quotedtime,
							num:Number(that.form.num),
							delivery:Number(that.form.delivery),
							warrantytime:that.form.warrantytime,
							brand:that.form.brand,
							qualific:that.form.qualific,
							qualific_images: that.qualific_images.toString(),
							remarks:that.form.remarks,
							setting: that.setting
						},
						header: {
							'content-type': 'application/json' //自定义请求头信息
						},
						method: 'POST',
						success: function(res) {
							uni.hideLoading()
							if (res.data.code == 1) {
								uni.showToast({
									title: res.data.msg,
									duration: 1500,
									icon: 'none'
								});
								uni.navigateBack({
									delta: 1
								})
							} else if (res.data.code == 0) {
								uni.showToast({
									title: res.data.msg,
									duration: 1500,
									icon: 'none'
								});
							} else if (res.data.code == -1) {
								uni.reLaunch({
									url: '/pages/clq_login/clq_login'
								})
							} else if (res.data.code == -2) {
								uni.showToast({
									title: res.data.msg,
									duration: 1500,
									icon: 'none'
								});
							}
						},
						error: function() {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}
					});
				}
			},
			inputObj(e) {
				let that = this
				let value = e.detail.value,
					key = e.currentTarget.dataset.name,
					type = e.currentTarget.dataset.type
				if (type == 1) {
					let obj = that.obj
					obj[key] = value
					that.obj = obj
					if (that.obj.setting_name && that.obj.setting_value) {
						that.setting.push(that.obj)
						console.log('that.obj', that.obj)
						that.settingType = 0
						that.obj = {}
						// console.log('that.setting', that.setting)
					} else if (that.obj.setting_name == '' && that.obj.setting_value == '') {
						that.settingType = 0
						that.obj = {}
					}
				} else if (type == 2) {
					let index = e.currentTarget.dataset.index
					if (index < 4 && key == 'setting_name') {
						uni.showToast({
							title: '默认基础参数不能修改'
						})
						that.setting[0].setting_name = '尺寸'
						that.setting[1].setting_name = '材质'
						that.setting[2].setting_name = '功能'
						that.setting[3].setting_name = '颜色'
					} else {
						that.setting[index][key] = value
						console.log('that.setting', that.setting)
						for (let i = 0; i < that.setting.length; i++) {
							if (that.setting[i].setting_name == '' && that.setting[i].setting_value == '') {
								that.setting.splice(i, 1)
							}
						}
					}
				}
			},
			addSetting() {
				this.settingType = 1
			},
			shippingMethodChange(e) {
				let that = this
				that.form.shipping_method = e.currentTarget.dataset.shipping_method
				console.log('that.form.shipping_method', that.form.shipping_method)
			},

			// deliveryChange(e) {
			// 	let that = this
			// 	that.form.delivery = e.detail.value
			// 	console.log('that.form.delivery', that.form.delivery)
			// },
			previewImage: function(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
					let images = that.qualific_images;
					uni.previewImage({
						current: images[index],
						urls: images,
						success: function(res) {
							
						},
						fail: function(res) {}
					});
			},
			upLoadImage(e) {
				let that = this;

				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						uni.showToast({
							title: '正在上传',
							icon: 'loading',
							duration: 10000
						});
						let imageList = res.tempFilePaths
						for (let i = 0; i < imageList.length; i++) {
							let filePath = imageList[i]
							let Key = filePath.substr(filePath.lastIndexOf('/') + 1); // 这里指定上传的文件名
							cos.postObject({
								Bucket: config.Bucket,
								Region: config.Region,
								Key: Key,
								FilePath: filePath,
								onProgress: function(info) {
									// console.log(JSON.stringify(info));
								}
							}, function(err, data) {
								let Paths = 'https://' + config.Bucket + '.cos.' + config.Region + '.myqcloud.com/' + Key
								// console.log('Paths', Paths)
								uni.showToast({
									title: '上传成功',
									icon: 'success',
									duration: 1000
								});
								that.qualific_images.push(Paths)
								// console.log('that.images', that.images)
							});

						}
					}
				})
			},
			imageDelete(e){
				let that = this
				let index = e.currentTarget.dataset.index
				that.qualific_images.splice(index,1)
			},
			needQualificChange(e) {
				let that = this
				that.form.need_qualific = e.currentTarget.dataset.need_qualific
				console.log('that.form.need_qualific', that.form.need_qualific)
				that.form.qualific = ''
				that.qualific_images = []
			},
			needBrandChange(e) {
				let that = this
				that.form.need_brand = e.currentTarget.dataset.need_brand
				console.log('that.form.need_brand', that.form.need_brand)
			},
			warrantytimeChange(e) {
				let that = this
				that.form.warrantytime = e.detail.value
				console.log('that.form.warrantytime', that.form.warrantytime)
			},
			quotedtimeChange(e) {
				let that = this
				that.form.quotedtime = e.detail.value
				console.log('that.form.quotedtime', that.form.quotedtime)
			},
			taxesTypeChange(e) {
				let that = this
				that.form.taxes_type = e.currentTarget.dataset.taxes_type
				console.log('that.form.taxes_type', that.form.taxes_type)
			},
			inputText(e) {
				let value = e.detail.value,
					key = e.currentTarget.dataset.name,
					form = this.form
				form[key] = value
				this.form = form
				console.log('this.form', this.form)
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.picker1 {
		width: 100%;
		box-sizing: border-box;
		height: 50rpx;
		padding: 0 20rpx;
		background-color: #fff;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.picker1-left1 {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}

	.picker1-left2 {
		font-size: 24rpx;
		font-weight: 500;
		color: #333;
	}

	.more-icon {
		width: 12rpx;
		height: 20rpx;
		margin-left: 14rpx;
	}

	.hr {
		width: 710rpx;
		height: 1rpx;
		background-color: #f7f7f7;
	}

	.proImage {
		width: 100%;
		box-sizing: border-box;
	}
	
	.imageItem {
		width: 145rpx;
		height: 120rpx;
		margin: 20rpx;
		position: relative;
	}
	
	.imageItem-main {
		width: 145rpx;
		height: 120rpx;
	}
	
	.imageItem-delete {
		width: 24rpx;
		height: 24rpx;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 99;
	}

	.upLoadImage {
		width: 145rpx;
		height: 120rpx;
		background: #e5e5e5;
		font-size: 82rpx;
		font-weight: 500;
		color: #999999;
		margin: 20rpx;
	}

	.inputBlock {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}

	.inputClass {
		width: 100%;
		text-align: right;
		font-size: 24rpx;
		color: #333333;
	}

	.inputPla {
		font-size: 24rpx;
		font-weight: 500;
		color: #999;
	}

	.releasecheck {
		width: 18rpx;
		height: 18rpx;
	}

	.brandInput {
		width: 710rpx;
		height: 55rpx;
		background: #fff;
		border: 1rpx solid #999999;
		border-radius: 6rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}

	.settingText {
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		margin-right: 19rpx;
	}

	.addSetting {
		width: 76rpx;
		height: 36rpx;
		border: 1rpx solid #ff7427;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #ff7427;
	}
	.textareaBlock{
		width: 100%;
		box-sizing: border-box;
		/* padding: 30rpx 20rpx; */
		background-color: #fff;
	}

	.releaseBtn {
		width: 430rpx;
		height: 76rpx;
		background: #ff7427;
		border-radius: 38rpx;
		font-size: 34rpx;
		font-weight: 500;
		color: #ffffff;
		margin: 49rpx 0 132rpx 0;
	}
</style>
